{% extends 'base.html' %}
{% block title %}Flights{% endblock %}
{% block scripts %}
<script>
  $(document).ready(function() {
    $("#nav-flights").addClass("active");
    {% if aircraft is defined %}
      var aircraft = {{ aircraft }};
    {% endif %}

    $('#addflight input').css('width', '150px');

    registerDeleteConfirmation('/flights');
  });
</script>
{% endblock scripts %}

{% block body %}
{{ util.modal_confirm() }}
{% if flights %}
<div class="row">
  <div class="col-12">
    <div class="container">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Date</th>
            <th>Aircraft</th>
            <th>Start airport</th>
            <th>End airport</th>
            <th>Hours</th>
            <th>Landings</th>
          </tr>
        </thead>
        <tbody>
          {% for flight in flights %}
          <tr id="{{ flight.key.urlsafe() }}">
            <td>{{ flight.date.strftime('%Y-%m-%d') }}</td>
            <td>{{ flight.aircraft.id() if flight.aircraft != None }}</td>
            <td>{{ flight.start_airport.id() if flight.start_airport != None }}</td>
            <td>{{ flight.end_airport.id() if flight.end_airport != None }}</td>
            <td>{{ flight.duration }}</td>
            <td>{{ flight.landings|length }}</td>
            <td>
              <div class="pull-right">
                <a class="btn btn-primary" name="details" href="/flight?f={{ flight.key.urlsafe() }}">Details</a>
                <button type="button" value="{{ flight.key.urlsafe() }}" class="btn delete">
                  <span class="glyphicon glyphicon-trash"></span>
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div class="container">
    {{ util.pager('/flights', prev_page, next_page) }}
    </div>
  </div>
</div>
{% endif %}
{% if pilot is defined %}
<div class="row">
  <div class="container well">
    <div class="container">
      <legend>Record a new flight</legend>
      <form class="form-inline" id="addflight" method="post" action="/flights">
        <input type="date" class="form-control" id="dateinput" name="date">
        <input type="text" class="form-control" placeholder="Aircraft" name="aircraft" id="aircraft" required="required">
        <input type="text" class="form-control" placeholder="Start airport" name="start_airport">
        <input type="text" class="form-control" placeholder="End airport" name="end_airport">
        <input type="text" class="form-control" placeholder="Hours" name="hours">
        <button type="submit" class="btn btn-primary" name="add-flight" value=1>Add</button>
      </form>
    </div>
  </div>
</div>
{% endif %}
{% endblock body %}
